<template>
  <el-dialog title="授权接口" :visible.sync="visible"
             @close="$emit('update:show', false)">
    <el-transfer
      v-model="bindedId"
      :filterable="true"
      :titles="titles"
      :props="{
          key: 'id',
          label: 'intName'
        }"
      :data="unbindApiList"
      style="width: 100%;">
    </el-transfer>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="save">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
    export default {
      name: "AuthApiMod",
      props: ['authType', 'authId', 'show'],
      watch: {
        show() {
          this.visible = this.show
        }
      },
      data() {
        return {
          visible: this.show,
          titles: ['未授权', '已选择'],
          unbindApiList: [],
          bindedId: [],
        }
      },
      mounted() {
        if(this.authId) {
          this.queryApis();
          this.queryApis(1);

        }
      },
      methods: {
        queryApis(binded) {
          let p = {};
          if(binded) {
            p = {
              authId: this.authId,
              authType: this.authType,
              authed: 1
            };
          }

          this.api.post('/bucket-system/gateway/api/interface/allList', p)
            .then((result) => {
              if(binded) {
                result.data.forEach((item) => {
                  this.bindedId.push(item.id);
                });
              } else
                this.unbindApiList = result.data;
            });
        },
        save() {
          let p = {
            authId: this.authId,
            authType: this.authType,
            intId: this.bindedId.join(',')
          };
          this.api.post('/bucket-system/gateway/api/interface/bind', p)
            .then((data) => {
              if(data.result==='0'){
                this.visible = false;
                this.$message({
                  message: '授权成功',
                  type: 'success'
                });
                this.$emit('saveComplete')
              }else{
                this.$message.error(data.data);
              }
            });
        }

      }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
